<template>
	<div class="cart">
		<div class="bar-header">
			<div class="sc-bor">
				<router-link to="/IntegralIndex">
					<img src="../../static/img3/zuo.png" @click="backward">
				</router-link>
				<div class="sc-header" style="left:.55rem; right:.55rem;">购物车</div>
			</div>
			<div class="free-item">
				<div class="rule-text">满49元免运费</div>
				<div class="rule-tips">
					<span class="rule-tip">去凑单</span>
					<img src="../../static/img3/weixian.png">
				</div>
			</div>
			<div class="list">
				<div class="basket-rule">
					<div class="rule-header">
						<div class="rule-marks">
							<span class="mark">满赠</span>
						</div>
						<div class="rule-separator">
							主人，满189元赠送爆米花 需购物车内领取，...
							<img src="../../static/img3/you.png">
						</div>
						<span class="rule-span">去凑单</span>
					</div>
				</div>
				<div class="basket-item">
					<div class="item-content" v-for="(item,index) in productList" :key="index">
						<label :class="{'checkbox1':item.isChecked}" @click="changeSel(item)"></label>
						<div class="imgbox">
							<router-link to="/productDetail">
								<img :src="item.pic" class="lazy">
							</router-link>
						</div>
						<div class="cont">
							<div class="title-container">
								<p>{{item.name}}</p>
							</div>
							<div class="item-price">
								<span>{{item.realPrice}}</span>
							</div>
							<div class="item-bottom">
								<button class="counter-dec" @click="delProduct(item)">-</button>
								<!--<input class="counter-num" type="text" v-model="item.count" disabled>-->
								<span class="counter-num">{{item.count}}</span>
								<button class="counter-inc" @click="addProduct(item)">+</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="cart-gwc" v-if="productList.length<=0">
				<div class="cart-empty">
					<div class="img-empty"></div>
					<div class="cart-text">主人，购物车还是空的哦~</div>
					<router-link to="/">
						<button class="cart-button">去逛逛</button>
					</router-link>
				</div>
			</div>
		</div>
		<div class="cart-footer" v-if="productList.length>0">
			<label class="checkbox-footer">
				<input type="checkbox" :class="{'footer-all': isCheckAll}" v-model="isCheckAll" @click="changeSelAll">全选
			</label>
			<div class="toal-info">
				<p class="pay-price">应付:
					<span class="price-number">{{productPrice}}</span>
				</p>
				<div class="other-price">
					<span class="cash-price">总价:
						<i class="font-number">{{productPrice}}</i>
					</span>
					<span class="integral-price">优惠:
						<i class="font-number">0.00</i>
					</span>
				</div>
			</div>
			<div class="button-bar">
				<button class="button-primary">
					<span class="settlement" @click="ishow">去结算</span>
					<i class="font-number" v-if="buySum>0">({{buySum}})</i>
				</button>
			</div>
		</div>
		<div v-if="isShow">
			<div class="background-bg"></div>
			<div class="modal-wrapper">
				<div class="modal-bar">
					结算
					<img src="../../static/img3/close.png" @click="ishow">
				</div>
				<div class="scroll">
					<div class="scroll-content">
						<div class="scroll-row">
							<div class="scroll-name">
								<span class="name">育知同创</span>
								18888888888
							</div>
							<div class="scroll-address">北京市 昌平区 物美大卖场二楼育知同创</div>
							<img class="img3" src="../../static/img3/xia.png">
						</div>
						<div class="scroll-r">
							<div class="checkout-title">优惠卷</div>
							<div class="checkout-content">0张可用</div>
						</div>
						<div class="checkout-row">
							<div class="checkout-row-title">松鼠币抵现</div>
							<div>
								<div class="checkout-row-content">可以使用270松鼠币抵0.27元</div>
								<label class="checkout-toggle">
									<input type="checkout">
									<div class="track">
										<div class="handle"></div>
									</div>
								</label>
							</div>
						</div>
						<div class="scroll-r ff">
							<div class="checkout-title">发票</div>
							<div class="checkout-content">不需要发票</div>
						</div>
						<div class="scroll-r ff">
							<div class="checkout-title">商品清单</div>
							<div class="checkout-content">共1件</div>
						</div>
						<div class="checkout-row">
							<div class="checkout-title">留言:</div>
							<div class="checkout-inout">
								<input class="input-order" type="text" placeholder="订单补充说明">
							</div>
						</div>
						<div class="scroll-r ff">
							<div class="checkout-title">支付方式</div>
							<div class="checkout-payment">支付宝</div>
						</div>
						<div class="scroll-r ff">
							<div class="checkout-title">应付金额</div>
							<p class="checkout-amount">
								<span class="amount-cash">{{productPrice}}</span>
								<span class="amount-freight">(含运费:8.00)</span>
								<p class="amount-tips">点击查看价格明细</p>
							</p>
						</div>
					</div>
				</div>
				<router-link :to="{path:'/userOrder', query:{type:'pay'}}" class="keyboard-open" tag="div">
					<button class="buttona" @click="confirm">确认付款</button>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default {

	data() {
		return {
			isShow: false,
		}
	},
	methods: {
		addProduct(item) {
			this.$store.commit('addProduct', item);
		},
		delProduct(item) {
			this.$store.commit('delProduct', item);
		},
		changeSel(item) {
			this.$store.commit("changeProductChecked", item);
		},
		changeSelAll() {
			this.$store.commit("checkAllProduct");
		},
		backward() {
			this.$router.go(-1);
		},
		ishow() {
			this.isShow = !this.isShow;
		},
		confirm() {
			this.$store.commit("account", this.$store.getters.checkedList);
			this.$store.commit("clearCheckedProduct");
		}
	},
	computed: {
		productList() {
			return this.$store.state.productList;
		},
		productPrice() {
			return this.$store.getters.productPrice;
		},
		isCheckAll() {
			return this.$store.state.isCheckAll;
		},
		showProductSum() {
			return this.$store.getters.productSum;
		},
		buySum() {
			return this.$store.getters.buySum;
		}
	},
}
</script>

<style scoped>
.cart {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	background: #f9f9f9;
}

.sc-header {
	font-size: 17px;
	color: #000;
	display: block;
	position: absolute;
	top: 0;
	z-index: 0;
	overflow: hidden;
	margin: 0 .1rem;
	min-width: .3rem;
	height: .43rem;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	line-height: .6rem;
}

.sc-bor {
	border-bottom: .01rem solid #ddd;
	height: .6rem;
	background: #fff;
}

.sc-bor img {
	margin: .2rem;
}

.cart-gwc {
	margin-top: 1.5rem;
	padding-top: 0;
	font-size: 15px;
}

.cart-gwc .cart-empty {
	padding-top: .825rem;
	text-align: center;
}

.img-empty {
	background: url(../../static/img3/gouwuchetu.png)center center no-repeat;
	margin: 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	background-size: 2.1rem auto;
}

.cart-text {
	color: #999;
	padding-top: .1rem;
	font-size: 14px;
}

.cart-empty .cart-button {
	margin-top: .2rem;
	padding: 0 .3rem;
	line-height: .5em;
	min-height: 0;
	height: .5rem;
}

.cart-button {
	border-color: #77bc1f;
	background: 0 0;
	color: #77bc1f;
	border-style: solid;
	border-radius: .08rem;
	border-width: .01rem;
	font-size: 16px;
}

.free-item {
	position: absolute;
	top: .6rem;
	left: 0;
	right: 0;
	z-index: 10;
	padding: .02rem .15rem 0;
	line-height: 2em;
	background-color: #f9c0cb;
	font-size: 15px;
	display: flex;
}

.rule-text {
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rule-tips {
	position: absolute;
	right: .1rem;
	width: .9rem
}

.rule-tip {
	color: #ee2e52;
	font-size: 14px;
}

.rule-tips img {
	position: absolute;
	right: 0;
	top: .1rem;
}

.list {
	position: absolute;
	width: 100%;
	top: 1.1rem;
}

.basket-rule {
	position: relative;
	margin: 0 0 .05rem;
	background: #fff;
	overflow: hidden;
}

.basket-rule .rule-header {
	color: #ff9601
}

.rule-header {
	position: relative;
	display: flex;
	box-sizing: content-box;
	padding: .1rem .1rem;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 11px;
}

.mark {
	position: relative;
	display: inline-block;
	margin-right: .08rem;
	padding: 0 .04rem;
	height: 1.5em;
	border-radius: 2px;
	color: #fff;
	background-color: #ff9601;
}

.mark:after {
	position: absolute;
	right: -.12rem;
	top: 40%;
	margin-top: -.03rem;
	width: .06rem;
	height: .06rem;
	border-width: .03rem;
	border-style: solid;
	border-left-color: #ff9601;
	content: '';
}

.rule-separator {
	margin-left: .04rem;
}

.rule-header .rule-span {
	color: #262626;
	margin-left: .1rem;
}

.basket-item {
	position: relative;
	margin: 0 0 .05rem;
	padding-left: .32rem;
	border: none;
	font-size: 15px;
}

.item-content {
	position: relative;
	padding: .1rem 0 .1rem .42rem;
	margin-left: -.32rem;
	background-color: #fff;
}

.item-content label {
	position: absolute;
	left: .12rem;
	top: .42rem;
}

.item-content .checkbox1 {
	position: absolute;
	left: .085rem;
	top: .4rem;
	margin-top: .015rem;
	width: .247rem;
	height: .247rem;
	display: inline-block;
	background-image: url(../../static/img3/dui.png)
}

.item-content label {
	border-color: #77bc1f;
	background: #77bc1f;
	content: ' ';
	display: block;
	width: .217rem;
	height: .217rem;
	border: 1px solid #999;
	background: 0 0;
	border-radius: 50%;
}

.imgbox {
	position: relative;
	float: left;
	width: 1.05rem;
	height: 1.05rem;
}

.imgbox .lazy {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.cont {
	margin-left: 1rem;
	padding-left: .1rem;
	min-height: 1rem;
	padding-right: .1rem;
	position: relative;
}

.item-price span {
	color: #ee2e52;
}
.item-bottom{
	display: flex;
}
.counter-dec {
	width: .4rem;
	overflow: hidden;
	border: 1px solid #fff;
	height: .25rem
}

.counter-inc {
	width: .4rem;
	border: 1px solid #fff;
	height: .25rem
}

.counter-num {
	width: .5rem;
	height: .25rem;
    line-height: .25rem;
	background-color: #fff;
	color: #262626;
	font-size: .2rem;
	background: #fff;
	text-align: center;
}

.cart-footer {
	position: absolute;
	bottom: .89rem;
	height: .55rem;
	padding: .05rem;
	width: 100%;
	background-color: #fff;
}

.checkbox-footer {
	float: left;
	padding-top: .03rem;
	width: auto;
	height: .5rem;
	line-height: .4rem;
	font-size: 12px;
}

.checkbox-footer .footer-all {
	margin-right: .1rem;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: .25rem;
	height: .25rem;
	border: 0;
	background: 0 0;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url(../../static/img3/dui.png);
}

.checkbox-footer input {
	border-color: #77bc1f;
	background: #77bc1f;
	content: ' ';
	display: block;
	width: .217rem;
	height: .217rem;
	border: 1px solid #999;
	background: 0 0;
	border-radius: 50%;
}

.toal-info {
	padding: .03rem 1.2rem 0 0;
	text-align: right;
}

.pay-price {
	line-height: 12px;
	height: 16px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
}

.price-number {
	color: #ee2e52;
}

.other-price {
	font-size: 10px;
	line-height: .14rem;
	white-space: nowrap;
	color: #999;
}

.cash-price {
	margin-right: .05rem;
}

.button-bar {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: auto;
}

.button-bar .button-primary {
	width: auto;
	height: .65rem;
	padding: .1rem .2rem;
	line-height: .17rem;
	border: 0;
	border-radius: 0;
	float: left;
	min-width: .8rem;
	font-size: 14px;
	background-color: #77bc1f;
	color: #fff;
}

.settlement {
	display: block;
	width: 100%;
	line-height: 1.2em;
	font-size: 17px;
}

.background-bg {
	position: absolute;
	opacity: .7;
	background-color: #000;
	z-index: 100;
	top: 0;
	width: 100%;
	height: 3.6rem;
}

.modal-wrapper {
	height: 64%;
	min-height: 0;
	max-height: 100%;
	top: auto;
	bottom: 0;
	background-color: #fff;
	position: absolute;
	width: 100%;
	font-size: 15px;
	z-index: 999;
}

.modal-bar {
	position: relative;
	z-index: 10;
	padding-left: .15rem;
	height: .434rem;
	line-height: .434rem;
	color: #000;
	background-color: #fff;
	font-size: 14px;
	text-align: left;
}

.modal-bar img {
	float: right;
	margin: .15rem .15rem 0 0;
}

.scroll {
	position: absolute;
	right: 0;
	left: 0;
	overflow: hidden;
	margin-top: -.01rem;
	padding-bottom: .01rem;
	width: auto;
	height: auto;
	bottom: .5rem;
	top: .54rem;
}

.scroll-row {
	margin: 0;
	padding: .1rem .2rem .1rem .1rem;
	height: auto;
	line-height: inherit;
	background: url(../../static/img3/xiantiao.png) top left repeat-x, url(../../static/img3/xiantiao.png) bottom left repeat-x;
	background-size: .78rem .03rem, .78rem .03rem;
	font-size: 14px;
}

.scroll-name {
	margin-bottom: .0rem;
	line-height: 1.25em;
}

.scroll-name .name {
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scroll-address {
	margin-bottom: 0;
	line-height: 1.5em;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scroll-r {
	box-sizing: content-box;
	position: relative;
	padding: .05rem .2rem .05rem 0;
	margin-left: .1rem;
	height: 2em;
	line-height: 2em;
}

.checkout-title {
	float: left;
}

.checkout-content {
	float: right;
	color: #ee2e52;
}

.checkout-row {
	padding-right: .5rem;
	box-sizing: content-box;
	position: relative;
	padding: .05rem .82rem .05rem 0;
	margin-left: .1rem;
	height: 2em;
	line-height: 2em;
}

.checkout-row-content {
	float: right;
}

.checkout-row-title {
	float: left;
}

.checkout-toggle {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -.21rem;
}

.checkout-toggle input {
	display: none;
}

.track {
	border-color: #77bc1f;
	background-color: #77bc1f;
	display: inline-block;
	box-sizing: border-box;
	width: .65rem;
	height: .4rem;
	border: solid 2px #e6e6e6;
	border-radius: 20px;
	content: ' ';
	cursor: pointer;
	pointer-events: none;
}

.handle {
	position: absolute;
	display: block;
	width: .3rem;
	height: .3rem;
	border-radius: .3rem;
	background-color: #fff;
	top: .05rem;
	left: .27rem;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .15);
}

.handle:before {
	position: absolute;
	top: -4px;
	left: -21.5px;
	padding: 18.5px 34px;
	content: " ";
}

.ff .checkout-content {
	color: #000;
}

.checkout-inout {
	margin-left: 2.5em;
}

.input-order {
	width: 100%;
	height: auto;
	padding: 0 .05rem;
	line-height: inherit;
	border: none;
	background-color: transparent;
}

.checkout-row .checkout-payment {
	background-image: url(../../static/img3/pay.png);
}

.checkout-payment {
	float: right;
	padding-left: 28px;
	background-repeat: no-repeat;
	background-size: 24px auto;
	background-position: left center;
}

.checkout-amount {
	float: right;
	margin-bottom: 0;
	height: 1em;
	line-height: 1em;
}

.amount-cash {
	float: left;
	color: #ee2e52;
}

.amount-freight {
	float: left;
	padding-left: 3px;
	color: #999;
}

.amount-tips {
	clear: right;
	float: right;
	margin-bottom: 0;
	line-height: 1.4em;
	font-size: 11px;
}

.img3 {
	position: absolute;
	right: 8px;
	top: 3%;
	height: 16px;
	line-height: 16px;
	margin-top: -8px;
}

.keyboard-open {
	height: .7rem;
	padding: .08rem .15rem;
	background: 0 0!important;
	bottom: 0;
	position: absolute;
	border-top-width: 1px;
	border-bottom-width: 0;
	border: none;
	user-select: none;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 9;
	box-sizing: border-box;
	width: 100%;
}

.keyboard-open .buttona {
	height: .535rem;
	min-height: .35rem;
	margin: 0;
	line-height: .33rem;
	font-size: 17px;
}

.buttona {
	border-color: transparent;
	background-color: #77bc1f;
	color: #fff;
	width: 100%;
	border-radius: 4px;
}
</style>